<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-07-28 14:29:52
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-28 15:55:32
-->
<template>
  <div>
    <div v-for="(priceObj, index) in priceData" :key="index">
      <el-input
        v-model="priceObj.price"
        size="mini"
        class="paddingTb5"
        @blur="(e)=>{onInputBlur(e, index)}"
      >
        <span slot="prefix" class="el-input__icon">{{ priceObj.unitName }}</span>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    unitData: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      priceData: []
    }
  },
  watch: {
    'unitData': {
      handler(data) {
        const unitData = data || []
        this.handlePriceData(unitData)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handlePriceData(unitData) {
      const data = unitData.map(item => {
        const obj = {}
        const { value, label, multi } = item
        obj.unitId = value
        obj.unitName = label
        obj.multi = multi
        obj.price = ''
        return obj
      })
      this.priceData = data
    },
    onInputBlur(e, index) {
      const value = e.target.value
      if (index === 0) {
        const priceData = this.priceData
        priceData.forEach(item => {
          const { multi } = item
          const priceNew = this.$amount(value).multiply(multi).format()
          this.$set(item, 'price', priceNew)
        })
      } else {
        const priceRow = this.priceData[index]
        const priceNew = this.$amount(value).format()
        this.$set(priceRow, 'price', priceNew)
      }
      this.$emit('input', this.priceData)
    }
  }
}
</script>

<style>

</style>
